<script setup type="module">
import axios from 'axios'
import {ref} from "vue";

let name = ref('')


let getMessage =()=>{
  axios({
    method:"post", // 请求方式
    url:"/api/axiosServlet",  // 请求的url
    // 当请求方式为get时,data下的数据以键值对的形式放在url之后
    // 当请求方式为post时,data下的数据以JSON串放入请求体,否则以key=value形式放url后
    data:{
      username:"123456"
    }
  }).then( function (response){//响应成功时要执行的函数
    /*
   response:响应结果对象
   data:服务端响应回来的数据
   status:响应状态码 200
   statusText:响应状态描述 200
   headers:本次响应的所有响应头
   config:本次请求的配置信息
   request：本次请求发送的时候使用的XMlHttpRequest对象
   */
    console.log("完整响应数据:", response);
    name.value = response.data.name
    // 检查数据结构是否正确
    // if (response.data && response.data.data.name) {
    //   name.value = response.data.data.name;
    // } else {
    //   // 如果结构不符，给出提示
    //   name.value = "数据格式不正确";
    //   console.warn("响应数据中未找到message字段");
    // }
  }).catch(function (error){// 响应失败时要执行的函数
    console.log(error)
  })
}
</script>

<template>
  <div>
    <p>用户名：{{ name }}</p>
    <button @click="getMessage">获取后端数据</button>
  </div>
</template>

<style scoped>
</style>
